<template>
	<div class="index">
		<el-table :data="props['tableData']" stripe :height="tableHeight" style="width: 100%; border-collapse: collapse;">
			<el-table-column align="center" :prop="item.key" show-overflow-tooltip :label="item.label" :width="item.width"
				v-for="(item, index) in props['columnData']" :key="index">
				<template #default="scope">
					<div v-if="item.label == '操作'">
						<a :style="{ color: i.color && i.color(scope) }" v-for="(i, index) in item.arr" :key="index"
							@click="i.method(scope)">{{ i.name }}</a>
					</div>
					<div class="rowCC" v-else @click="item.method(scope)" :style="{ color: item.color && item.color(scope) }">
						<div class="table-icon mr-1" :style="{ background: item.iconColor && item.iconColor(scope) }">
						</div>{{ item.value ? item.value(scope) : scope.row[scope.column.property] }}
					</div>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script lang="ts" setup>
const props: any = defineProps({
	tableData: Array,
	columnData: Array,
	tableHeight: String,
})
</script>

<style lang="scss" scoped>
.index {
	:deep(.el-table) {
		color: #fff;
		border: none;
		font-size: 0.8em;
		--el-table-border: none;
		--el-table-header-bg-color: #071c54;
		--el-table-header-text-color: #fff;
		--el-table-border-color: none;
		--el-table-row-hover-bg-color: none;
		--el-table-bg-color: none;

		.cell {
			line-height: 1.2;
			font-weight: 400;
		}

		tr {
			// background: #193670;
			// border-radius: 10px;
			// overflow: hidden;
			// border: 10px solid;
			background: #071c54;
			background-image: url('@/assets/img/index/tableBg.png') !important;
			background-size: 100% 100% !important;
		}

		.el-table__cell {
			padding: 0.625em 0;
			margin: 0.625em 0;
			// height: 50px
		}
	}

	:deep(.el-table__body) {
		border-collapse: collapse;
	}

	:deep(tbody) {
		background: #071c54;
	}

	:deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
		background: none;
	}

	.table-icon {
		width: 0.8em;
		height: 0.8em;
		border-radius: 50%;
	}
}
</style>